<!--
 * @Description: 高德地图
 * @Author: zzj
 * @Date: 2021-10-10 18:29:03
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-10 18:45:09
-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>地图</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=4ce6a51ca3dcb18a098b9a9bb110cf31"></script>
</head>
<body>
	<div id="app">
		<h2>高德地图</h2>
		<div ref="container"></div>
	</div>
	<script>
		new Vue({
			el:"#app",
			data:{
				map:null
			},
			mounted(){
				this.renderMap();
			},
			methods:{
				renderMap(){
					let container = this.$refs.container;
					 container.style.height = "500px"
					 this.map = new AMap.Map(container, {
						zoom: 11,//级别
						center: [112.720988, 37.750227],//中心点坐标
						viewMode: '3D'//使用3D视图
					});
				}
			}
		})
	</script>
</body>
</html>